/**
 * Created by huotaol on 2017/5/3.
 */
import React, {Component} from "react";
import PropTypes from "prop-types";
import {ListView, StyleSheet, Text, TouchableOpacity, View} from "react-native";
import {connect} from "react-redux";
import CustomStyle from "../../../common/style/CustomStyle";
import * as BuyCarAction from "../../redux/action/BuyCar";
import {Actions} from "react-native-router-flux";

const DATA_SOURCE = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
class Series extends Component {

    static propTypes = {
        needRequestDetailKind: PropTypes.bool,
        onSelected: PropTypes.func,
    };

    static defaultProps = {
        needRequestDetailKind: false,
        onSelected: () => {
        },
    };

    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {brand: ''};
        this._renderItem = this._renderItem.bind(this);
    }

    componentDidMount() {
    }

    render() {
        const brand = this.props.brand;
        console.log('series  render ' + brand);
        if (this.brand !== brand) {
            this.brand = brand;
            this.props.requestSeries(brand);
        }
        return (
            <ListView
                style={[this.props.style, {flex: 1,}]}
                dataSource={DATA_SOURCE.cloneWithRows(this.props.data)}
                renderRow={this._renderItem}
                renderSeparator={this._renderSeparator}
            />
        );
    }

    _renderItem(item) {
        return <SeriesItem text={item} click={() => {
            if (this.props.needRequestDetailKind && item !== '不限车系') {
                Actions.DetailKind({brand: this.props.brand, series: item, onSelected: this.props.onSelected,});
            } else {
                let brand = this.props.brand;
                brand = brand === '不限品牌' ? '' : brand;
                let series = item === '不限车系' ? '' : item;
                this.props.onSelected(brand, series, '');
                Actions.pop();
            }
        }
        }/>
    }

    _renderSeparator() {
        return <View style={CustomStyle.separator}/>
    }

}


class SeriesItem extends Component {
    static propTypes = {
        text: PropTypes.string,
        click: PropTypes.func,
    };


    render() {
        const select = false;
        return (
            <TouchableOpacity
                onPress={this.props.click}
                style={[styles.itemContainer, {
                    paddingLeft: CustomStyle.getActualSizeInHorizontal(40),
                }]}
            >
                <Text
                    style={[CustomStyle.baseText, {
                        fontSize: CustomStyle.getActualFontSize(30),
                        color: '#b2a682',
                    }]}>{this.props.text}</Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    itemContainer: {
        height: CustomStyle.getActualSizeInVertical(88),
        width: CustomStyle.getActualSizeInHorizontal(300),
        backgroundColor: 'white',
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },
});

const mapStateToProps = (state) => {
    const {series} = state;
    return {
        data: series.data,
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        requestSeries: (brand) => {
            dispatch(BuyCarAction.requestSeries(brand));
        },
        updateFilter: param => dispatch(BuyCarAction.buyCarFilter(param)),
    };
};


export default connect(mapStateToProps, mapDispatchToProps)(Series);